<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>药品详情</title>

    <!-- Bootstrap -->
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    var maxCount = parseInt("${fn:escapeXml(item.inventory) }");
    function submitForm(action, data) {
    	document.getElementById("inputAction").value = action;
    	document.getElementById("inputData").value = data;
    	document.getElementById("formGoodItem").submit();
    }
    
    function addCount()  {
    	var inputCount = document.getElementById("inputCount");
    	if (inputCount.value == "") {
    		var currentCount = 1;
    	} else {
    		var currentCount = parseInt(inputCount.value);
    	}
    	if (currentCount < 0)
    		currentCount = 0;
    	currentCount = currentCount + 1;
    	if (currentCount <= maxCount)
    		inputCount.value = currentCount;
    }
    
    function subCount() {
    	var inputCount = document.getElementById("inputCount");
    	if (inputCount.value == "") {
    		var currentCount = 1;
    	} else {
    		var currentCount = parseInt(inputCount.value);
    	}
    	if (currentCount < 0)
    		currentCount = 1;
    	if (currentCount > 1)
    		currentCount = currentCount - 1;
    	inputCount.value = currentCount;
    }
    </script>
</head>

<body>

      <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<%=request.getContextPath()%>/">本草纲目网</a>
        </div>
        
        <c:if test="${user eq null }">
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" method="post" action="<%=request.getContextPath()%>/Account/Login">
            <input type="hidden" name="action" value="login" />
            <div class="form-group">
              <input type="text" placeholder="账户" name="username" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" name="password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">立即登陆</button>
            <a class="btn btn-info" href="<%=request.getContextPath() %>/Account/Register">马上注册</a>
          </form>
        </div><!--/.navbar-collapse -->
		</c:if>
		<c:if test="${user ne null }">
		<div id="navbar" class="navbar-collapse collapse">
		  <ul class="nav navbar-nav navbar-right">
		    <li><a>欢迎您，<b>${fn:escapeXml(user.realName) }</b>！</a></li>
		    <li><a href="<%=request.getContextPath() %>/Order/ShowMyOrders">我的订单</a></li>
		    <li><a href="<%=request.getContextPath() %>/Cart/ShowMyCart">我的购物车</a></li>
		    <li><a href="<%=request.getContextPath() %>/Account/Logout">注销</a></li>
		  </ul>
  		</div>
		</c:if>

      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <!-- <div class="jumbotron"> -->
      <div class="container">
        <h1 style="font-family:华文行楷;" >本草纲目<small>网</small> </h1>
        
        <div class="row">
          <div class="col-lg-3 col-sm-2"></div><!--左侧不用-->
          <div class="col-lg-6 col-sm-8 col-xs-12">
          <form method="get" action="<%=request.getContextPath()%>/GoodItem/SearchGoodItem">
           <div class="input-group">
             <input type="text" class="form-control" name="keyword" placeholder="检索药品……" value="${fn:escapeXml(param.keyword) }">
             <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">查询药品</button>
             </span>
           </div><!-- /input-group -->
            </form>
         </div><!-- /.col-sm-4 -->
         <div class="col-lg-3 col-sm-2"></div><!--右侧不用-->

       </div><!-- /.row --> 
       
       <br /><br />
       
    <form method="post" id="formGoodItem" target="_blank">
	  <input type="hidden" id="inputAction" name="action" value="" />
	  <input type="hidden" id="inputData" name="data" value="" />
	</form>
	<div class="row" style="padding-left:10px;">
      <div class="col-md-3 col-sm-2"></div>
      <div class="col-md-6 col-sm-10 col-xs-12">
	    <div class="row">
		  <h3>商品名：${fn:escapeXml(item.name) }</h3>
		</div>
		<div class="row">
		  <h4 style="color:#CC3300">描述：${fn:escapeXml(item.description) }</h4>
		</div>
		<div class="row">
		  <h4 style="color:#CC3300">价格：${fn:escapeXml(item.price) }&nbsp;元</h4>
		</div>
		<div class="row">
		  <h4 style="color:#CC3300">库存：${fn:escapeXml(item.inventory) }&nbsp;件</h4>
		</div>
		<div class="row">
		  <div style="float:left;">
		    <h4 style="color:#CC3300">数量：</h4>
		  </div>
		  <div class="form-group" style="float:left;">
			<input type="text" class="form-control" name="buyCount" id="inputCount" placeholder="1" disabled="disabled" style="max-width:60px;height:32px;">
		  </div>
		  <!--更改数量代码部分开始-->
          <div class="btn-group-vertical" role="group" aria-label="..." style="float:left;">
            <button type="button" class="btn btn-default btn-xs" onclick="addCount();" style="height:16px;">
              <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-xs" onclick="subCount();" style="height:16px;">
              <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </button>
          </div><!--更改数量代码部分结束-->  
		</div>
		<c:if test="${item.state.code eq 1 }">
		  <div class="row">
		    <button type="button" class="btn btn-primary btn-md" onclick="submitForm('addToCart', document.getElementById('inputCount').value);">加入购物车</button>
		    <c:if test="${admin ne null }">
		      <button type="button" class="btn btn-danger btn-md" onclick="submitForm('deleteGoodItem', '');">下架本商品</button>
		    </c:if>
		  </div>
		</c:if>
		<c:if test="${item.state.code eq 0 }">
		  <div class="row">
		    <div class="alert alert-warning" role="alert" id="alert-warning">本商品已经下架！</div>
		  </div>
		</c:if>
	  </div>
    </div> <!-- .row -->
 
    <div style="margin-top:20px;"></div>
 
    <footer style="padding-top:19px;color:#777;border-top:1px solid #e5e5e5">
      <p>&copy; 2016 中国药科大学理学院信息管理与信息系统13480班第3组</p>
    </footer>

</div>
<!-- </div> -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=request.getContextPath()%>/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.min.js"></script>
  </body>
</html>
